<div class="description only-emudeck">
  <h1>Excluded Games & Exceptions</h1>
  <p>
    Here you can see the games you've excluded on the Preview page in case you
    want to add them back
  </p>
</div>

<div class="upperMenu">
  <div class="slider">
    <ng-select
      class="selectSort"
      [(ngModel)]="sortBy"
      [placeholder]="lang.placeholder.sortBy"
      [values]="sortByOpts"
    >
    </ng-select>
  </div>

  <ng-text-input
    class="searchExceptions"
    placeholder="Search Exceptions"
    [(ngModel)]="filterValue"
  ></ng-text-input>
</div>
@if(showMarkdown) {
  <markdown class="docs" [content]="this.currentDoc.content"></markdown>
}
<div class="userExceptions">
  <div [formGroup]="exceptionsForm">
    <div
      class="itemsform"
      formArrayName="items"
      *ngFor="
        let item of exceptionsFormItems.controls.sort(
          exceptionsSort.bind(this)
        );
        let i = index
      "
    >
      <div
        class="exception-entry"
        [formGroupName]="i"
        *ngIf="
          (item | formGroup).controls['oldTitle'].value | fuzzyTest: filterValue
        "
      >
        <div class="inputContainer">
          <div class="inlineLeft">
            <div class="text" style="margin-right: 0.25em">
              Extracted Title:
            </div>
            <ng-text-input
              class="ngTextInput"
              placeholder="extractedTitle to override"
              [formControl]="
                (item | formGroup).controls['oldTitle'] | formControl
              "
            ></ng-text-input>
          </div>
          <div class="inlineLeft">
            <div class="text" style="margin-right: 0.25em">
              New Display Title:
            </div>
            <ng-text-input
              class="ngTextInput"
              placeholder="Display title"
              [formControl]="
                (item | formGroup).controls['newTitle'] | formControl
              "
            ></ng-text-input>
          </div>
          <div class="inlineLeft">
            <div class="text" style="margin-right: 0.25em">
              New Search Title:
            </div>
            <ng-text-input
              class="ngTextInput"
              placeholder="Search title"
              [formControl]="
                (item | formGroup).controls['searchTitle'] | formControl
              "
            ></ng-text-input>
          </div>
          <div class="inlineLeft">
            <div class="text" style="margin-right: 0.25em">
              New Commandline Args:
            </div>
            <ng-text-input
              class="ngTextInput"
              placeholder="--custom-args"
              [formControl]="
                (item | formGroup).controls['commandLineArguments']
                  | formControl
              "
            ></ng-text-input>
          </div>
          <div class="inlineLeft">
            <div class="text" style="margin-right: 0.25em; width: 100%">
              Created:
              {{ prettyDate((item | formGroup).controls["timeStamp"].value) }}
            </div>
          </div>
          <div class="inlineGroup">
            <div class="inlineGroup">
              <ng-toggle-button
                class="ngToggleButton excludeButton"
                [formControl]="
                  (item | formGroup).controls['exclude'] | formControl
                "
                >{{ lang.text.exclude }}</ng-toggle-button
              >
              <ng-toggle-button
                class="ngToggleButton"
                [formControl]="
                  (item | formGroup).controls['excludeArtwork'] | formControl
                "
                >{{ lang.text.excludeArtwork }}</ng-toggle-button
              >
            </div>
            <div class="deleteItem" (click)="deleteItem(i)">
              {{ lang.buttons.deleteItem }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="addItem" (click)="addItem()">{{ lang.buttons.addItem }}</div>
</div>
<div class="menu" drag-scroll>
  <div class="lowerLeft">
    <div class="dangerousButton" (click)="deleteAll()">
      {{ lang.buttons.deleteAll }}
    </div>
    <div (click)="save()" *ngIf="isUnsaved">{{ lang.buttons.save }}</div>
    <div *ngIf="isUnsaved" (click)="undo()">{{ lang.buttons.undoChanges }}</div>
    <div class="addItem" class="only-emudeck" (click)="addItem()">
      {{ lang.buttons.addItem }}
    </div>
  </div>
  <div class="lowerRight">
    @if(appSettings.theme=='EmuDeck'){
      <nav-link
      [routerLink]="['/parsers-list']"
      routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }"
      >Back</nav-link>
    }
    @else {
      @if(showMarkdown) {
        <div (click)="closeDocs()" class="dangerousButton">Close Docs</div>
      }
      @else {
        <div (click)="openDocs()">Open Docs</div>
      }
    }
  </div>

</div>
